<template>
  <div class="blackView">
    <Map v-show="isShow"
      v-if="laneMsgControl"
      :load="getMap1Area"
      :map-center="mapsCenterWkt"
      :zoom="12"
      class="blackView"
    ></Map>
    <!-- <div>
      <LeftTip :act="3" :tab="3" ></LeftTip>
    </div> -->
    <div class="updownBtnBox" >
      <div :class="`mode-btn-box ${selectType == 1 ? 'mode-select-box' : ''}`" @click="changeUpDownFun(1)">早高峰-南向北</div>
      <div :class="`mode-btn-box ${selectType == 2 ? 'mode-select-box' : ''}`" @click="changeUpDownFun(2)">早高峰-北向南</div>
      <div :class="`mode-btn-box ${selectType == 3 ? 'mode-select-box' : ''}`" @click="changeUpDownFun(3)">晚高峰-南向北</div>
      <div :class="`mode-btn-box ${selectType == 4 ? 'mode-select-box' : ''}`" @click="changeUpDownFun(4)">晚高峰-北向南</div>
    </div>
    <div class="example">
      <p>流量图例</p>
      <div class="box">
        <div class="colorBoxH colorBlue"></div>
        <div>{{ firstDeti }}</div>
      </div>
      <div class="box">
        <div class="colorBoxH colorGre"></div>
        <div>{{ secondDeti }}</div>
      </div>
      <div class="box">
        <div class="colorBoxH colorYel"></div>
        <div>{{ thirdDeti }}</div>
      </div>
      <div class="box">
        <div class="colorBoxH colorRed"></div>
        <div>{{ fourDeti }}</div>
      </div>
    </div>
  </div>
</template>

<script>
import Map from '@/components/map1.vue'
import LeftTip from './tab/leftTip.vue'
import{
  getDeviceVolume,
  getKkVolume,
  getDeviceGisData,
  getAreaOd,
  getAreaInfo
} from '@/api/api.js';
export default {
  name: 'home',
  components: {
    Map,
    LeftTip
  },
  data() {
    return {
      firstDeti: '<=10',
      secondDeti: '>10 <=50',
      thirdDeti: '>50 <=100',
      fourDeti: '>100',
      showTra: false,
      laneMsgControl: true,
      mapsCenterWkt: [120.222245,30.241048],
      isShow: true,
      heatmap:null,
      removeHeatMap: [],
      type: 'home',
      removeCrossMarkerIcon: [],
      removeOdPoiIcon: [],
      odAreas: [],
      odAniLines: [],
      selectType: 0,
      allData: [],
      arrowClick: true,
    }
  },
  created(){
    
  },
  mounted(){
    
  },

  methods: {
    getMap1Area(){
      // this.initHeatMap(this.gradient, 25)
      this.getData()
    },
    initHeatMap(gradient, newRaius){
      let that = this
      if (!this.isSupportCanvas()) {
        alert('热力图仅对支持canvas的浏览器适用,您所使用的浏览器不能使用热力图功能,请换个浏览器试试~')
      }
      window.map1.plugin(["AMap.HeatMap"], function () {
        //初始化heatmap对象
        that.heatmap = new AMap.HeatMap(window.map1, {
          radius: newRaius, //给定半径
          opacity: [0, 0.8],
          gradient: gradient,
          height: 0,

        })
        that.removeHeatMap.push(that.heatmap)
      })
    },
    async getData(){
      // let res = await getDeviceVolume()
      // if(res.data.data){
      //   this.allData = res.data.data
      //   this.heatMap1(res.data.data)
      // }
      this.changeUpDownFun(1)
    },
    heatMap1(data){
      if(window.location.href.indexOf('home') == -1) return
      let that = this
      // that.closet()
      let points = []
      let filecolor = {
        0.5: 'blue',
        0.65: 'rgb(117,211,248)',
        0.7: 'rgb(0, 255, 0)',
        0.95: '#ffea00',
        1.0: 'red'
      }
      data.forEach((item, index) => {
        let score = item.volume
        let wkt = item.wkt.split(',')
        points.push({
          'lng': wkt[0],
          'lat': wkt[1],
          'count': score
          // 'count': 3 * 6.4 * Math.round(Math.random() * (10 - 2) + 2)
        })
      })
      that.initHeatMap(filecolor, 25)
      that.heatmap.setDataSet({
        data: points,
        max: 25
      });
    },
    async changeUpDownFun(selectType){
      if(!this.arrowClick){
        return
      }
      this.closet()
      if(selectType == this.selectType){
        this.selectType = 0
        // this.heatMap1(this.allData)
        return
      }
      this.arrowClick = false
      this.selectType = selectType
      
      let type = ''
      let dir = ''
      if(selectType == 1){
        type = '1'
        dir = '1'
      } else if(selectType == 2){
        type = '1'
        dir = '2'
      } else if(selectType == 3){
        type = '2'
        dir = '1'
      } else if(selectType == 4){
        type = '2'
        dir = '2'
      }
      let res = await getKkVolume({ type, dir })
      this.arrowClick = true
      if(res.data.data){
        this.heatMap1(res.data.data)
        // res.data.data.forEach(item => {
        //   if(item.volume > 30){
        //     console.log(item)
        //   }
        // })
      }
    },

    closet(){
      // this.heatmap.setDataSet({
      //   data: [],
      //   max: 100
      // })
      if(this.removeHeatMap.length){
        this.removeHeatMap.forEach(item => {
          item.setDataSet({
            data: [],
            max: 75
          })
        })
        this.removeHeatMap = []
      }
    },
    isSupportCanvas() {
      var elem = document.createElement('canvas');
      return !!(elem.getContext && elem.getContext('2d'));
    },
  },
  beforeDestroy(){
    this.closet()
  }
}
</script>

<style lang="less" scoped>
.updownBtnBox{
  position: absolute;
  bottom: 150px;
  left: 0;
  right: 0;
  margin-left: auto;
  margin-right: auto;
  width: max-content;
  z-index: 2;
  .mode-btn-box {
    position: relative;
    display: inline-block;
    margin-left: 5px;
    margin-right: 5px;
    width: 106px;
    height: 40px;
    font-weight: 700;
    line-height: 40px;
    text-align: center;
    border-radius: 10px;
    color: #FFF;
    background: linear-gradient(6deg, rgba(20, 24, 27, 0.11) 0%, rgba(225, 224, 206, 0.44) 100%) ;
    box-shadow: 0px 0 7px 0px rgba(0, 0, 0, 0.22);
    border: 1px solid rgba(95, 101, 111, 0.93) ;
    -webkit-backdrop-filter: blur(16.2px);
    backdrop-filter: blur(16.2px);
    font-size: 14px;
    cursor: pointer;
    user-select: none;
  }
  .mode-select-box{
    border: 1px solid #FFBF39;
    background: linear-gradient(180deg, rgba(255, 171, 0, 0.26) 0%, rgba(255, 177, 0, 0) 100%), linear-gradient(180deg, rgba(255, 171, 0, 0.23) 0%, rgba(255, 177, 0, 0) 100%);
  }
  // .mode-select-box{
  //   background: linear-gradient(180deg, rgba(255, 171, 0, 0.26) 0%, rgba(255, 177, 0, 0) 100%), linear-gradient(180deg, rgba(255, 171, 0, 0.23) 0%, rgba(255, 177, 0, 0) 100%);
  //   border: 1px solid #FFBF39 ;
  // }
  // .mode-select-box{
  //   background: linear-gradient(180deg, rgba(255, 171, 0, 0.26) 0%, rgba(255, 177, 0, 0) 100%), linear-gradient(180deg, rgba(255, 171, 0, 0.23) 0%, rgba(255, 177, 0, 0) 100%);
  //   border: 1px solid #FFBF39 ;
  // }
  // .mode-grey-box{
  //   color: #999;
  //   background: linear-gradient(6deg, rgba(20, 24, 27, 0.11) 0%, rgba(225, 224, 206, 0.44) 100%) ;
  //   border: 1px solid rgba(95, 101, 111, 0.93) ;
  // }
}
.example{
  position: fixed;
  right: 20px;
  bottom: 20px;
  background: #2e2d2d;
  backdrop-filter: blur(16px);
  box-shadow: 0 0 7px 0 rgba(0, 0, 0, .22);
  border: 2px solid rgba(95, 101, 111, .9);
  z-index: 100;
  padding: 14px;
  width: 160px;
  height: 206px;
  box-sizing: border-box;
  color: #FFF;
  font-size: 16px;
  border-radius: 6px;
  .box{
    display: flex;
    align-items: center;
    text-align: left;
    line-height: 32px;
  }
  p{
    text-align: center;
    font-size: 24px;
    font-weight: 600;
    margin-bottom: 16px;
  }
  .colorBoxH{
    width: 20px;
    height: 20px;
    border-radius: 50%;
    margin-right: 20px;
    box-shadow: 0px 0px 4px 4px rgba(184, 179, 179, 0.75);
    text-align: center;
    line-height: 18px;
    color: #000;
    font-weight: 700;
    font-size: 16px;
  }
  .colorRed{
    background: red;
  }
  .colorGre{
    background: rgb(0, 255, 0);
  }
  .colorYel{
    background: #ffea00;
  }
  .colorBlue{
    background: blue;
  }
}
</style>